<template>
  <div class="storeAudit-container">
    <!-- 头部导航 -->
    <div class="header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item>开店审核</el-menu-item>
      </el-menu>
    </div>

    <!-- 表单区域 -->
    <el-form ref="storeAuditFormRef" :model="storeAuditForm" :inline="true">
      <el-form-item label="店铺编号/名称" prop="store_num">
        <el-input v-model="storeAuditForm.store_num" class="store_num"></el-input>
      </el-form-item>

      <el-form-item label="行业" prop="business">
        <el-select v-model="storeAuditForm.business">
          <el-option :label="item.name" :value="item.name" v-for="item in businessData" :key="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item><el-button class="submit" @click="onSubmit">查询</el-button></el-form-item>
      <el-form-item><el-button @click="resetForm">重置</el-button></el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-card class="main">
      <el-table :data="shareData" style="width: 100%">
        <el-table-column prop="id" label="店铺编号" width="140"> </el-table-column>
        <el-table-column prop="store_name" label="店铺名称" width="180"> </el-table-column>
        <el-table-column prop="business" label="店铺行业" width="140"> </el-table-column>
        <el-table-column prop="address" label="店铺地址" width="180"> </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="140"> </el-table-column>
        <el-table-column prop="promoter_id" label="推广人ID" width="140"> </el-table-column>
        <el-table-column prop="state" label="状态" width="140"> </el-table-column>
        <el-table-column prop="remark" label="备注" width="140"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="toExamine(scope.row)"> 审核 </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'storeAuditIndex',
  props: {},
  data() {
    return {
      // 表单区域数据对象
      storeAuditForm: {
        store_num: '',
        business: ''
      },
      // 店铺数据
      shareData: [],
      // 行业下拉列表数据
      businessData: []
    }
  },

  created() {
    // 获取店铺数据
    this.loadShareData()

    // 加载行业下拉列表数据
    this.loadBusinesses()
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    async loadBusinesses() {
      const { data } = await this.$http.get('/businesses')
      this.businessData = data
    },
    async loadShareData() {
      try {
        const { data } = await this.$http.get('/store')
        this.shareData = data
      } catch (error) {
        this.$message.error('获取数据失败!请稍后重试')
      }
    },
    // 点击查询按钮 提交表单
    async onSubmit() {
      // 如果没有选择或者输入任何条件, 查询所有数据
      if (this.storeAuditForm.store_num + this.storeAuditForm.business === '') {
        return this.loadShareData()
      }
      // 先将数据清空
      this.shareData = []

      // 按照编号发送请求进行模糊查询
      if (this.storeAuditForm.store_num !== '') {
        const { data: res } = await this.$http.get(`/store?id_like=${this.storeAuditForm.store_num}`)
        this.shareData = res

        // 按照名称发送请求进行模糊查询
        const { data: res2 } = await this.$http.get(`/store?store_name_like=${this.storeAuditForm.store_num}`)
        res2.forEach((item) => {
          if (!this.shareData.find((subitem) => subitem.id === item.id)) {
            this.shareData.push(item)
          }
        })
      }

      if (this.storeAuditForm.business !== '') {
        // 按照行业发送请求进行模糊查询
        const { data: res3 } = await this.$http.get(`/store?business=${this.storeAuditForm.business}`)
        res3.forEach((item2) => {
          if (!this.shareData.find((subitem) => subitem.id === item2.id)) {
            this.shareData.push(item2)
          }
        })
      }
    },
    // 点击重置按钮 重置表单
    resetForm() {
      // 重置表单
      this.$refs.storeAuditFormRef.resetFields()
      // 重新渲染
      this.loadShareData()
    },
    toExamine (row) {
      const id = row.id
      this.$router.push(`/examine/${id}`)
    }
  },

  watch: {}
}
</script>
<style lang='less' scoped>
.storeAudit-container {
  width: 100%;
  .header {
    .el-button {
      margin-left: 0;
    }
  }

  .el-form {
    margin: 10px 10px 0;
    // height: 73px;
    border: 1px solid #797979;
    border-radius: 6px;
    line-height: 73px;
    .el-form-item {
      height: 100%;
      margin-bottom: 0;
      .store_num {
        width: 200px;
      }
      /deep/ .el-form-item__label {
        margin-left: 30px;
        line-height: unset;
      }
      /deep/ .el-form-item__content {
        line-height: unset;
      }
      .line {
        width: 17px;
      }
      .submit {
        margin: 0 28px 0 80px;
      }
    }
  }

  .main {
    // height: 600px;
    margin: 5px 10px 0;
    border: 1px solid #797979;
    border-radius: 6px;
    /deep/ .el-card__body {
      padding: 10px 10px 0;
    }
    /deep/ .el-table__header-wrapper {
      box-sizing: border-box;
      border: 1px solid #797979;
      border-radius: 6px;
    }

    /deep/ .el-link {
      margin: 0 3px;
    }
  }
}
</style>
